<template>
  <div class="personal-info">
    <el-button
      style="margin:22px 0;"
      class="CustomBtn"
      @click="copyReferralCode"
      >复制推荐码</el-button
    >
    <el-tooltip content="复制推荐码">
      <el-link
        @click="copyReferralCode"
        type="info"
        :underline="false"
        class="referral_code"
        >推荐码: {{ userInfo.referral_code }}</el-link
      >
    </el-tooltip>

    <el-form
      :model="userInfo"
      :rules="rules"
      class="UserInfo"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="用户名" prop="name">
        <el-input :disabled="!isEdit" v-model="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="原密码" prop="name">
        <el-input
          :disabled="!isEdit"
          placeholder="请输入原密码"
          v-model="userInfo.prepassword"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮件" prop="email">
        <el-input :disabled="!isEdit" v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="email_code">
        <el-input
          style="width:100px;"
          :disabled="!isEdit"
          v-model="userInfo.email_code"
        ></el-input>
        <SendEmailBtn :isEdit="isEdit" :userInfo="userInfo" />
      </el-form-item>
      <el-form-item>
        <el-button class="CustomBtn" :disabled="!isEdit" @click="updateUserInfo"
          >保存</el-button
        >
        <el-button
          type="info"
          plain
          round
          style="margin-left:50px;"
          @click="isEdit = !isEdit"
          >{{ isEdit ? '取消修改' : '修改' }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { isEmail, isUser, isPassword } from '@/utils/validate'
import { encryptData } from '@/utils/encrypt'
import SendEmailBtn from '@/components/User/SendEmailBtn'
import { copyToClipboard } from '@/utils/tools'
export default {
  name: 'Center',
  data() {
    let validateEmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    let validateUser = (rule, value, callback) => {
      if (!isUser(value)) {
        callback(new Error('只能由字母、数字组成，1-13位'))
      } else {
        callback()
      }
    }
    return {
      SendEmailCodeTime: 60,
      // 是否允许编辑标志位
      isEdit: false,

      // 校验规则
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { validator: validateUser, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      },
      userInfo: {
        name: '',
        prepassword: '',
        email: '',
        email_code: ''
      }
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.user.userInfo
    }
  },
  components: {
    SendEmailBtn
  },
  methods: {
    copyReferralCode() {
      copyToClipboard(this.userInfo.referral_code)
      this.$message.success('已复制推荐码')
    },
    async updateUserInfo() {
      if (!this.userInfo.prepassword) return this.$message.error('请输入原密码')
      let originpassword = this.userInfo.prepassword
      this.userInfo.prepassword = encryptData(this.userInfo.prepassword)
      console.log(this.userInfo)
      // 更新用户信息的方法
      const datas = this.$qs.stringify(this.userInfo)
      this.userInfo.prepassword = originpassword
      const res = await this.$API.user.updateUserInfo(datas)
      console.log(res)
      if (res.status == 200) {
        this.$message.success('修改成功')
        this.isEdit = false
        // 重新获取用户列表
        this.$store.dispatch('user/GetUserInfo')
        this.userInfo.email_code = ''
        this.userInfo.prepassword = ''
        window.location.reload()
      }
    }
  },
  mounted() {
    this.userInfo = { ...this.userinfo }
  },
  watch: {
    // userinfo: {
    //   imeediate: true,
    //   deep: true,
    //   handler (val, oldval) {
    //     console.log(val)
    //     this.userInfo = { ...val }
    //   }
    // }
  }
}
</script>

<style scoped>
.personal-info {
  background-color: #ffffff;
  padding: 10px 30px;
  border-radius: 16px;
}
.UserInfo {
  color: #9d9e9d;
}
.referral_code {
  margin: 10px 0 30px 0;
}
</style>
